<template>
  <div>

    <!--    题库数据面板-->
    <!--    <el-dialog title="题库" :visible.sync="dialogTiKuVisible" width="80%" :modal="true">-->
    <!--      <upload-excel-component :on-success="handleSuccessExcel" :before-upload="beforeUploadExcel" />-->
    <el-upload
      ref="uploadExcel"
      :action="getUrl()"
      :data="tapeData"
      :limit="1"
      :auto-upload="false"
      accept=".xlsx"
      :on-success="handleOnSuccess"
      :on-change="handleOnChange"
      :before-upload="handleBeforeUpload"
      :on-remove="handleRemove"
    >
      <!--    <input slot="trigger" ref="excel-upload-input" classmgt="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">-->
      <!--      <input slot="trigger" ref="excel-upload-input" classmgt="excel-upload-input" type="file" accept=".xlsx, .xls" v-model="inputVal">-->
      <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover" @click="clickUpload">
        点击上传
        <!--        Drop excel file here or click-->
        <!--                <el-button classmgt="inline-block":loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">-->
        <!--                  Click-->
        <!--                </el-button>-->
      </div>

    </el-upload>
    <!--    <el-button :loading="loading" style="float:right;margin-bottom:16px;" size="mini" type="primary" @click="handleUpload">上传-->
    <!--    </el-button>-->
    <el-button class="filter-item" type="warning" @click="handleUpload" :disabled="isCloseUpload">导入<i class="el-icon-upload2 el-icon--right"></i>
    </el-button>
    <!--    <a :href="downloadExcel">-->
    <!--      <el-button  class="filter-item" :type="downloadType" @click="handleDownload">导出<i-->
    <!--        class="el-icon-download el-icon&#45;&#45;right"></i></el-button>-->
    <!--    </a>-->
    <div id="server_show" class="el-icon-document" v-show="serverDocDisplay">
      <span style="margin-left: 10px" id="server_doc_name" v-text="serverDocName"></span>
    </div>


    <!--      <uploadfile :on-change="handleSuccessExcel"  :before-upload="beforeUploa
    dExcel" />-->
    <!--      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:5px;">-->
    <!--        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />-->
    <!--      </el-table>-->
    <!--    </el-dialog>-->

  </div>

</template>

<script>
import XLSX from 'xlsx'
import { parseTime } from '@/utils'

export default {
  name: 'Uploadexcel',
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function,// eslint-disable-line
    onChange: Function,
    // ref: String,
    // tableData:Array,、；
    // tableHeader: Array,
    //----20201027-----
    tapeData: {},
    uploadPath: String

  },
  data() {
    return {

      // pathUploadExcel: 'http://localhost:8180/act/excel',
      // pathUploadExcel: ' http://localhost:8180/educloud/uploadStudent',
      pathUploadExcel: this.uploadPath,
      loading: false,
      excelData: {
        header: null,
        results: null
      },
      inputVal: '',
      tableData: [],
      tableHeader: [],

      downloadExcel: 'javascript:void(0)',
      // serverDocDisplay: false
      serverDocName: '没有文件上传',
      downloadType: 'warning',
      isCloseUpload:false

    }
  },
  computed: {


    serverDocDisplay() {
      let url = this.tapeData.excelurl
      console.log('serverDocDisplay=' + url)
      if (this.isExcelUrl(url)) {
        let sindex = url.lastIndexOf('/')
        let name = url.substring(sindex + 1)
        this.serverDocName = name

        this.downloadType = 'success'
        return true
      } else {
        return false
      }

    }
    // pathUploadExcel(){
    //   return this.pathUploadExcel
    // },
    // tapeData(){
    //   let _tapaDate={
    //     actid:"",
    //     name:"",
    //     codename:"excel",
    //     url:"",
    //     auther:"cxy",
    //     excelurl:"",
    //     modifytime:"",
    //     platform:""
    //   }
    // }

  },
  watch: {},
  created() {
  },

  methods: {

    getUrl(){
      return this.uploadPath
    },
    clickUpload(){
      this.$refs['uploadExcel'].clearFiles()
    },
    handleOnChange(file, fileList) {
      this.tableData = file.raw
      let rawFile = file.raw
      // console.log('上传文件：' + rawFile)
      if (!rawFile) return
      // console.log("file=="+JSON.stringify(fileList[0]))
      this.upload(rawFile)
      // this.$emit('get-tabledata',this.tableData)
    },

    handleOnSuccess(response, file, fileList) {
      this.inputVal = response.data
      console.log('handleOnSuccess:' + response.data)

      if (response.data > 0) {
        this.onSuccess && this.onSuccess({ file, fileList })
        this.$notify({
          title: '成功',
          message: '导入成功：' + response.data + '条',
          type: 'success',
          duration: 2000,
          onClose:()=>{this.isCloseUpload=false}
        })
      } else {
        this.$notify({
          title: 'Error',
          message: response.data,
          type: 'error',
          duration: 2000,
          onClose:()=>{this.isCloseUpload=false}
        })
      }

      this.clickUpload()

      // if (this.isExcelUrl(response.data)) {
      //   this.tapeData.excelurl = response.data
      //   this.$notify({
      //     title: '成功',
      //     message: '导入成功',
      //     type: 'success',
      //     duration: 2000
      //   })
      // } else {
      //   this.$notify({
      //     title: '警告',
      //     message: '导入异常：' + response.data,
      //     type: 'warning',
      //     duration: 2000
      //   })
      // }

    },

    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },

    handleBeforeUpload(file){
      console.log("this.handleBeforeUpload="+JSON.stringify(file))
    },

    handleRemove(file,filelist){

    },
    handleUpload() {

      // console.log("this.isHaveFile="+ JSON.stringify(this.$refs['uploadExcel'].uploadFiles))
      if(this.$refs['uploadExcel'].uploadFiles.length>0){
        this.isCloseUpload= true
        this.tapeData.modifytime = parseTime(new Date())
        // this.$refs['excel-upload-input'].click()
        this.$refs['uploadExcel'].submit()
      }else{
        this.$message({
          message: '请先选择要上传的文件',
          type: 'warning',
          duration:1000
        })
      }


    },
    handleDownload() {
      let url = this.tapeData.excelurl
      console.log(' this.downloadExcel ==' + this.isExcelUrl(url))
      if (this.isExcelUrl(url)) {
        this.downloadExcel = this.tapeData.excelurl
      } else {
        this.$notify({
          title: '警告',
          message: '暂无可下载的资源',
          type: 'warning',
          duration: 2000
        })
      }
    },

    generateData({ header, results }) {
      // console.log('generateData:header=' + header)
      // console.log('generateData:results=' + results)
      this.excelData.header = header
      this.excelData.results = results
      this.onChange && this.onChange(this.excelData)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message.error('Only support uploading one file!')
        return
      }
      const rawFile = files[0] // only use files[0]

      if (!this.isExcel(rawFile)) {
        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
        return false
      }
      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
    // handleClick(file, fileList) {
    //   console.log("file=="+JSON.stringify(file))
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      // console.log("file=="+JSON.stringify(fileList[0]))
      this.upload(rawFile)

      // this.upload(fileList[0])
    },
    upload(rawFile) {
      // this.$refs['excel-upload-input'].value = null // fix can't select the same excel
      // if (!this.beforeUpload) {
      //   this.readerData(rawFile)
      //   return
      // }
      // const before = this.beforeUpload(rawFile)//检查文件大小
      // if (before) {
      this.readerData(rawFile)
      // }
    },
    readerData(rawFile) {
      this.loading = true
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          const workbook = XLSX.read(data, { type: 'array' })
          const firstSheetName = workbook.SheetNames[0]
          const worksheet = workbook.Sheets[firstSheetName]
          const header = this.getHeaderRow(worksheet)
          const results = XLSX.utils.sheet_to_json(worksheet)
          this.generateData({ header, results })
          this.loading = false
          resolve()
        }
        reader.readAsArrayBuffer(rawFile)
      })
    },
    getHeaderRow(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name)
    },

    isExcelUrl(url) {
      return /\.(xlsx|xls|csv)$/.test(url)
    }

  }

}
</script>

<style scoped>
.excel-upload-input {
  display: none;
  z-index: -9999;
}

.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-top: 10px;
}

.drop {
  border: 2px dashed #bbb;
  width: 600px;
  height: 160px;
  line-height: 160px;
  margin: 0 auto;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
}
</style>
